<template>
  <div class="baseContainer">
    <div class="baseBorderShadow bgWhite baseBorderRadius">
      <div class="operate_container">
        <div class="operate_item">
          <div class="operate_left">用户名</div>
          <div class="operate_right">
            <el-input
              v-model.trim="userName"
              placeholder="请输入内容"
              clearable
              style="width:185px"
            >
            </el-input>
          </div>
        </div>
        <div class="operate_item">
          <div class="operate_left">账号</div>
          <div class="operate_right">
            <el-input
              v-model.trim="userCode"
              placeholder="请输入内容"
              clearable
              style="width: 185px"
            >
            </el-input>
          </div>
        </div>
        <div class="operate_item">
          <div class="operate_left">角色</div>
          <div class="operate_right">
            <el-select
              v-model="roleId"
              placeholder="请选择"
              style="width: 185px;"
            >
              <el-option
                label="全部"
                value=""
              ></el-option>
              <el-option
                v-for="(item, index) in options_user"
                :key="index"
                :label="item.roleName"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="operate_item">
          <div class="operate_left">启用状态</div>
          <div class="operate_right">
            <el-select
              v-model="status"
              placeholder="请选择"
              style="width: 185px;"
            >
              <el-option
                v-for="(item, index) in statusOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
        <!-- 查询按钮 -->
        <div class="operate_item_btnGroup">
          <el-button
            type="warning"
            @click="searchFunc"
          >搜索</el-button>
          <el-button
            type="primary"
            class="btnGray"
            @click="resetFunc"
          >重置</el-button>
        </div>

      </div>
      <div class="handle_wrap">
        <el-button
          type="primary"
          @click="addUserDialog"
        >添加用户</el-button>
      </div>
      <!-- </div> -->
      <!-- <div class="baseBoderShadow bgWhite baseBorderRadius" style="min-height:690px"> -->
      <div style="padding:30px">
        <!-- <div style="padding-bottom:20px" v-if="!linkRoleId">
            <el-input v-model.trim="seachName" placeholder="请输入用户名" clearable style="width:300px" suffix-icon="el-icon-search">
            </el-input>
            <el-button type="warning"  @click="seachBtn">搜索</el-button>
          </div> -->
        <table
          class="special_table"
          width="100%"
        >
          <thead>
            <tr>
              <td>帐号</td>
              <td>用户名</td>
              <td>角色</td>
              <td style="width:180px">启用/禁用</td>
              <td style="width:250px">操作</td>
            </tr>
          </thead>
          <tbody>
            <template v-if="tableData.length">
              <tr
                v-for="(item, index) in tableData"
                :key="index"
              >
                <td>{{ item.userCode||'-' }}</td>
                <td>{{ item.userName||'-' }}</td>
                <td>
                  <div
                    :title="item.roleName"
                    class="one_line"
                  >{{item.roleName}}</div>
                  <!-- <template v-if="item.roleList.length">
                        <span class="userName" v-for="(i,index) in item.roleList" :key="index+i">{{i.roleName}}</span>
                    </template>
                    <template v-else> - </template> -->
                </td>
                <td
                  style="width:180px"
                  class="switchBox"
                >
                  <div class="special_switch_wrap">
                    <el-switch
                      :width="60"
                      v-model="item.switchValue"
                      active-text="启用"
                      inactive-text="禁用"
                      active-color="#13ce66"
                      inactive-color="#b8bec9"
                      @change="changeSwichBtn(item)"
                    >
                    </el-switch>
                  </div>

                </td>
                <td style="width:250px">
                  <el-button
                    size="mini"
                    round
                    type="warning"
                    @click="editRole(item)"
                  >编辑</el-button>
                  <el-button
                    class="btnBlue"
                    size="mini"
                    round
                    type="primary"
                    @click="resetPassword(item.id)"
                  >重置</el-button>
                </td>
              </tr>
            </template>
            <template v-else>
              <tr>
                <td colspan="5">暂无数据</td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
      <div style="padding:25px;text-align: center;">
        <el-pagination
          background
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40,50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <!-- 编辑角色 -->
      <el-dialog
        :visible.sync="dialogVisible"
        title="编辑角色"
        width="500px"
      >
        <div style="min-height:120px">
          <div style="margin-bottom:35px">
            <span class="titleName">基本角色:</span>
            <el-select
              style="width:350px"
              v-model="value_user"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="item in options_user"
                :key="item.id"
                :label="item.roleName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div style="padding-left:75px">
            <el-button
              type="primary"
              @click="submit"
            >确定</el-button>
            <el-button @click="dialogVisible=false">取消</el-button>
          </div>
        </div>
      </el-dialog>

      <!-- 添加用户 -->
      <el-dialog
        :visible.sync="dialogVisible_addUser"
        title="添加用户"
        width="500px"
      >
        <div style="min-height:120px">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="80px"
          >
            <el-form-item
              label="账号"
              prop="userCode"
            >
              <el-input v-model.trim="form.userCode" />
            </el-form-item>
            <el-form-item
              label="用户名"
              prop="userName"
            >
              <el-input v-model.trim="form.userName" />
            </el-form-item>
            <el-form-item
              label="密码"
              prop="pass"
            >
              <el-input
                type="password"
                v-model.trim="form.pass"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item>
                <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item> -->
          </el-form>
          <div style="padding-left:80px">
            <el-button
              type="primary"
              @click="submitForm('form')"
            >确定</el-button>
            <el-button @click="dialogVisible_addUser=false">取消</el-button>
          </div>

        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: "yhgl",
  data() {
    return {
      userName: "",
      userCode: "",
      roleId: "",
      status: "",
      roleOptions: [],
      statusOptions: [
        { label: "全部", value: "" },
        { label: "启用", value: 1 },
        { label: "禁用", value: 0 }
      ],
      searchData: {
        userName: "", // 用户名
        userCode: "", // 账号
        roleId: "", // 角色id
        status: "" // 启用状态
      },
      seachName: "",
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      totalPage: 0,
      dialogVisible: false,
      form: {
        userCode: "",
        userName: "",
        pass: ""
      },
      defaultProps: {
        children: "children",
        label: "name"
      },
      tree_data: [],
      dialogVisible_sq: false,
      checkedKeys: [],
      // roleId: 0,
      options_user: [],
      value_user: [],
      nowId: 0,
      dialogVisible_addUser: false,
      linkRoleId: 0,
      rules: {
        userCode: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" }
        ],
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" }
        ],
        pass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 10, message: "长度在 6 到 10 个字符", trigger: "blur" }
        ]
      }
    };
  },
  watch: {},
  mounted() {
    if (this.$route.query && this.$route.query.roleId) {
      this.linkRoleId = this.$route.query.roleId;
      // 从角色管理跳过来的，处理roleId
      this.roleId = Number(this.linkRoleId);
      this.searchData.roleId = this.roleId;
    }
    this.sysRole();
    this.roleList();
    this.findRoleOptions();
  },
  methods: {
    /**
     * @name findRoleOptions
     * @description 获取角色列表
     * @author cjs1992
     * @date 2019-12-11 11:27:45
     */
    async findRoleOptions() {
      const res = await this.$store.dispatch("qxgl-jsgl/findList", {
        pageNum: 1,
        pageSize: 9999,
        roleName: ""
      });
      const list = res.data.list || [];
      this.roleOptions = list;
    },
    /**
     * @name findZsList
     * @description 宿舍查询-搜索
     * @author wqy
     * @date 2019-09-05 17:08:55
     */
    async roleList() {
      let data = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        // userName: this.seachName // 入学年级ID
        ...this.searchData
      };
      // if (this.linkRoleId) {
      //   Object.assign(data, {
      //     roleId: this.linkRoleId
      //   });
      // }
      const res = await this.$store.dispatch("qxgl-yhgl/findList", data);
      res.data.list.map(item => {
        item.status == 1
          ? (item.switchValue = true)
          : (item.switchValue = false);
      });
      let list = res.data.list || [];
      list.map(item => {
        item.roleName = item.roleList.map(vo => vo.roleName).join(",");
      });
      this.tableData = res.data.list;
      this.totalPage = res.data.total;
      // this.sysRole();
    },
    /**
     * @name  handleCurrentChange handleSizeChange
     * @description 分页
     * @author wqy
     * @date 2019-09-16 15:45:04
     */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.roleList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.roleList();
    },
    /**
     * @name searchFunc
     * @description 查询
     * @author cjs1992
     * @date 2019-12-12 11:31:20
     */
    searchFunc() {
      this.searchData = {
        userName: this.userName,
        userCode: this.userCode,
        roleId: this.roleId,
        status: this.status
      };
      this.handleCurrentChange(1);
    },
    /**
     * @name resetFunc
     * @description 重置
     * @author cjs1992
     * @date 2019-12-12 11:32:22
     */
    resetFunc() {
      this.userName = "";
      this.userCode = "";
      this.roleId = "";
      this.status = "";
      this.searchFunc();
    },
    changeSwichBtn(item) {
      if (item.status == 1) {
        this.disableGetBtn(item.id);
      } else {
        this.enablegetBtn(item.id);
      }
    },
    /**
     * @name enablegetBtn
     * @description 启用
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    async enablegetBtn(id) {
      const res = await this.$store.dispatch("qxgl-yhgl/enableGet", {
        id: id
      });
      if (res.status == 1000) {
        this.$message({
          message: "启用成功!",
          type: "success"
        });
        this.roleList();
      }
    },
    /**
     * @name disableGetBtn
     * @description 禁用
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    async disableGetBtn(id) {
      const res = await this.$store.dispatch("qxgl-yhgl/disableGet", {
        id: id
      });
      if (res.status == 1000) {
        this.$message({
          message: "禁用成功!",
          type: "success"
        });
        // this.currentPage = 1;
        this.roleList();
      }
    },
    /**
     * @name resetPassword
     * @description 重设密码
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    resetPassword(id) {
      this.$confirm("您确定要重置密码吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.resetPasswordAjax(id);
        })
        .catch(() => {});
    },
    async resetPasswordAjax(id) {
      const res = await this.$store.dispatch("qxgl-yhgl/resetPassword", {
        id: id
      });
      if (res.status == 1000) {
        this.$message({
          message: "重设密码成功!",
          type: "success"
        });
        this.roleList();
      }
    },
    /**
     * @name sysRole
     * @description 获取所有的角色
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    async sysRole() {
      const res = await this.$store.dispatch("qxgl-yhgl/sysRoleAll");
      if (res.status == 1000) {
        this.options_user = res.data;
      }
    },
    /**
     * @name editRole
     * @description 编辑角色
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    editRole(item) {
      this.value_user = [];
      this.nowId = item.id;
      for (let item of item.roleList) {
        this.value_user.push(item.id);
      }
      this.dialogVisible = true;
    },
    /**
     * @name submit
     * @description 编辑角色-确定按钮
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    async submit() {
      if (!this.value_user.length) {
        this.$message({
          message: "请选择基本角色!",
          type: "warning"
        });
        return;
      }
      let roleListId = "";
      for (let item of this.value_user) {
        roleListId += item + ",";
      }
      let reg = /,$/gi;
      roleListId = roleListId.replace(reg, "");
      const res = await this.$store.dispatch("qxgl-yhgl/assign", {
        id: this.nowId,
        roleIds: roleListId
      });
      if (res.status == 1000) {
        this.$message({
          message: "编辑成功!",
          type: "success"
        });
        this.dialogVisible = false;
        this.roleList();
      }
    },
    addUserDialog() {
      this.form = {
        userCode: "",
        userName: "",
        pass: ""
      };
      this.dialogVisible_addUser = true;
    },

    /**
     * @name addUser
     * @description 添加用户
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.addUser();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async addUser() {
      // if (this.form.userCode.length == 0) {
      //   this.$message({
      //     message: "请输入账号!",
      //     type: "warning"
      //   });
      //   return;
      // }
      // if (this.form.userName.length == 0) {
      //   this.$message({
      //     message: "请输入用户名!",
      //     type: "warning"
      //   });
      //   return;
      // }
      // if (this.form.pass.length < 6) {
      //   this.$message({
      //     message: "密码长度不能小于6个字符!",
      //     type: "warning"
      //   });
      //   return;
      // }
      // if (this.form.pass.length > 10) {
      //   this.$message({
      //     message: "密码长度不能大于10个字符!",
      //     type: "warning"
      //   });
      //   return;
      // }
      const res = await this.$store.dispatch("qxgl-yhgl/addUser", {
        userCode: this.form.userCode,
        userName: this.form.userName,
        password: this.form.pass
      });
      if (res.status == 1000) {
        this.$message({
          message: "添加用户成功!",
          type: "success"
        });
        this.dialogVisible_addUser = false;
        this.currentPage = 1;
        this.pageSize = 10;
        this.roleList();
      }
    },
    /**
     * @name deleteRole
     * @description 删除用户
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    deleteTip(id) {
      this.$confirm("您确定要删除用户吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteUser(id);
        })
        .catch(() => {});
    },
    async deleteUser(id) {
      const res = await this.$store.dispatch("qxgl-yhgl/deleteUser", {
        id: id
      });
      if (res.status == 1000) {
        this.$message({
          message: "删除成功!",
          type: "success"
        });
        this.roleList();
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/views/jcsz/common-switch.scss";
// .el-switch{
//   width: 135px;
// }
.operate_container {
  padding: 22px;
  box-shadow: 0 5px 39px 0 rgba(0, 0, 0, 0.1);
}
.operate_item {
  display: inline-table;
  margin-right: 20px;
  margin-bottom: 12px;
}
.operate_left {
  display: table-cell;
  padding-right: 12px;
  width: 88px;
  color: #344563;
  text-align: right;
  font-size: 14px;
  box-sizing: border-box;
}
.operate_right {
  display: table-cell;
}
.operate_item_btnGroup {
  display: inline-block;
  width: 272px;
  text-align: right;
}
.operate_item_btnGroup .el-button {
  width: 106px;
}
h5,
p,
ul,
img {
  padding: 0;
  margin: 0;
  border: 0;
}
.clearfix {
  *zoom: 1;
}

.clearfix:after {
  display: block;
  clear: both;
  content: " ";
  height: 0;
  visibility: hidden;
}

li {
  list-style-type: none;
}
.qxgl {
  padding: 15px;
}
.zsHistory .iconfont {
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}
.blue {
  color: #6bc5ff;
  cursor: pointer;
}
.greey {
  color: #aaafb3;
}
.greey:hover {
  color: #eb9616;
}
.addBtn {
  display: inline-block;
  margin-right: 20px;
  color: #409eff;
  background: #ecf5ff;
  border: 1px solid;
  border-color: #b3d8ff;
  padding: 6px 15px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}
.addBtn:hover {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
}
.treeBox {
  height: 350px;
  overflow-y: scroll;
}
.userName {
  padding-right: 10px;
  display: inline-block;
}
.titleName {
  line-height: 36px;
  padding-right: 15px;
}
.padding20 {
  padding-top: 20px;
}
</style>
